import React from 'react';
import { useChromeHistory, useHistoryStats } from '../../hooks/useChromeHistory';
import { HistoryStats } from '../../components/HistoryVisualization/HistoryStats';
import { TimeSpentChart } from '../../components/HistoryVisualization/TimeSpentChart';
import { ActivityTimeline } from '../../components/HistoryVisualization/ActivityTimeline';
import { MostVisitedChart } from '../../components/HistoryVisualization/MostVisitedChart';
import { ActivityHeatmap } from '../../components/HistoryVisualization/ActivityHeatmap';
import { ChartCard } from '../../components/ChartCard';
import './HistoryTab.css';

export const HistoryTab = () => {
  const { history, loading, error } = useChromeHistory({ maxResults: 10000 });
  const stats = useHistoryStats(history);

  if (loading) {
    return <div className="loading">Loading browser history...</div>;
  }

  if (error) {
    return (
      <div className="error-state">
        <p>Error loading history: {error}</p>
        <p style={{ fontSize: '12px', marginTop: '8px', color: 'rgba(255, 255, 255, 0.5)' }}>
          Make sure the extension has history permissions enabled.
        </p>
      </div>
    );
  }

  if (history.length === 0) {
    return (
      <div className="empty-state">
        <p>No browsing history available.</p>
        <p style={{ fontSize: '12px', marginTop: '8px', color: 'rgba(255, 255, 255, 0.5)' }}>
          Start browsing to see your activity patterns here.
        </p>
      </div>
    );
  }

  return (
    <div className="history-tab">
      <h2 className="section-title">Browser History Analytics</h2>
      
      <HistoryStats stats={stats} />

      <ChartCard title="Time Spent per Domain">
        <TimeSpentChart timeSpentByDomain={stats.timeSpentByDomain} limit={10} />
      </ChartCard>

      <ChartCard title="Hourly Activity Pattern">
        <ActivityTimeline hourlyPattern={stats.hourlyPattern} />
      </ChartCard>

      <ChartCard title="Most Visited Sites">
        <MostVisitedChart timeSpentByDomain={stats.timeSpentByDomain} limit={10} />
      </ChartCard>

      <ChartCard title="Weekly Activity Pattern">
        <ActivityHeatmap dailyPattern={stats.dailyPattern} />
      </ChartCard>
    </div>
  );
};
